import './index.scss'
import draggable from 'vuedraggable'
import { queryAllComponentsList } from '@/api/shoppingMall/feature';

export default {
  name: 'micro-all-can-use-components',
  props: {
    /**
     * 结构
     * hideTheseComponents = [{type: 'config',isHide:true}]
     * */
    hideTheseComponents: { // 隐藏这些组件
      type: Array,
      default: () => []
    },
    showTheseComponents: { // 显示这些组件
      type: Array,
      default: () => []
    },
    isShowAllComponents: { // 是否隐藏所有组件
      type: Boolean,
      default: true
    }
  },
  components: {
    draggable
  },
  watch: {
    hideTheseComponents: {
      deep: true,
      handler() {
        this.hideComponents()
      }
    },
    showTheseComponents: {
      deep: true,
      handler() {
        this.showComponents()
      }
    }
  },
  data() {
    return {
      componentItem: {},
      componentLists1: [],
      activeName: ['1', '2', '3'],
      componentLists: [// 所有可用的组件
        {
          type: 'config', // 组件名称标识
          title: '配置',
          isHide: true, // 是否隐藏选择
          isHeader: true, // 是否为头部
          routerPath: () => import('../header/index.vue')// 路由地址
        },
        { // 公共广告头部配置
          type: 'config_common_ad',
          title: '配置',
          isHide: true, // 是否隐藏选择
          isHeader: true, // 是否为头部
          routerPath: () => import('../header_ad/index.vue')
        },
        { // 标题文本
          type: 'title_text',
          title: '标题文本',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../title-text/index.vue'),
          iconsClass: 'icon-biaoti'
        },
        { // 文本
          type: 'text',
          title: '文本',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../textArea/index.vue'),
          iconsClass: 'icon-wenbenkuang'
        },
        { // 分隔占位
          type: 'cutoffRule',
          title: '分隔占位',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../cutoffRule/index.vue'),
          iconsClass: 'icon-fengexian'
        },
        { // 富文本
          type: 'richText',
          title: '富文本',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../richTextArea/index.vue'),
          iconsClass: 'icon-fuwenbenkuang'
        },
        { // 视频组件
          type: 'videoComponent',
          title: '视频组件',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../videoComponent/index.vue'),
          iconsClass: 'icon-shipinheji'
        },
        { // 组合图片
          type: 'magicCube',
          title: '组合图片',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../magicCube/index.vue'),
          iconsClass: 'icon-shujumofang'
        },
        { // 公告
          type: 'notice',
          title: '公告',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../notice/index.vue'),
          iconsClass: 'icon-gonggao'
        },
        { // 图片广告
          type: 'image_ad',
          title: '图片广告',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../image_ad/index.vue'),
          iconsClass: 'icon-huadongduotu'
        },
        { // 搜索框
          type: 'search',
          title: '搜索框',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../search/index.vue'),
          iconsClass: 'icon-sousuogongjulan'
        },
        { // 图文导航
          type: 'navIcons',
          title: '图文导航',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../tab-nav/index.vue'),
          iconsClass: 'icon-haibaozujian'
        },
        { // 图片广告
          type: 'digital_flop',
          title: '数字标签',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../digital_flop/index.vue'),
          iconsClass: 'icon-shangpinzhekou'
        },
        { // 倒计时
          type: 'countDown',
          title: '倒计时',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../countDown/index.vue'),
          iconsClass: 'icon-daojishi1'
        },
        { // 图表
          type: 'ucharts_single',
          title: '图表',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../ucharts_single/index.vue'),
          iconsClass: 'icon-tubiao'
        },
        { // 图表
          type: 'ucharts_magic',
          title: '组合图表',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../ucharts_magic/index.vue'),
          iconsClass: 'icon--analysis'
        },
        { // 店铺信息
          type: 'shop',
          title: '店铺信息',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../shop/index.vue'),
          iconsClass: 'icon-dianpu'
        },
        { // 在线客服
          type: 'service',
          title: '在线客服',
          isHide: false,
          componentType: 0,
          routerPath: () => import('../service/index.vue'),
          iconsClass: 'icon-dianhua'
        },
        { // 功能导航
          type: 'fixed_fun_nav',
          title: '功能导航',
          isHide: true,
          componentType: 0,
          routerPath: () => import('../fixed-fun-nav/index.vue'),
          iconsClass: 'icon-haibaozujian'
        },
        { // 活动模块
          type: 'activity_list',
          title: '图文组件',
          componentType: 1,
          isHide: true,
          routerPath: () => import('../shoppingActivity/index.vue'),
          iconsClass: 'icon-haibaozujian'
        },
        { // 专题文章
          type: 'article',
          title: '专题文章',
          componentType: 2,
          isHide: false,
          routerPath: () => import('../excellent_article/index.vue'),
          iconsClass: 'icon-duihuan'
        },
        { // 短视频
          type: 'short_video',
          title: '视频号',
          componentType: 2,
          isHide: false,
          routerPath: () => import('../short_video/index.vue'),
          iconsClass: 'icon-duihuan'
        },
        { // 直播
          type: 'broad_casting',
          title: '直播',
          componentType: 2,
          isHide: false,
          routerPath: () => import('../broad_casting/index.vue'),
          iconsClass: 'icon-duihuan'
        }
      ],
      basicComponentLists: [], // 基础组件
      activityComponentLists: [], // 功能组件
      contentComponentLists: [], // 内容组件
      isDrag: true
    }
  },
  mounted() {
    this.getAllComponentsList()
    this.$emit('retAllCanUseComponents', this.componentLists)
    this.componentLists.forEach(item => {
      if (!item.isHide && item.componentType === 0) {
        this.basicComponentLists.push(item)
      } else if (!item.isHide && item.componentType === 1) {
        this.activityComponentLists.push(item)
      } else if (!item.isHide && item.componentType === 2) {
        this.contentComponentLists.push(item)
      }
    })
    this.hideComponents()
    this.showComponents()
  },
  methods: {
    getAllComponentsList() {
       queryAllComponentsList().then(res => {
           if (res) {
            res.forEach((item, index) => {
              if(item.isHeader){
                this.componentItem = {
                    type: item.code,
                    title: item.name,
                    isHeader: item.isHeader,
                    isHide: item.isHide,
                    routerPath: (resolve) => require([`${item.routerPath}`], m => resolve(m.default))
                  }
              }else{
                this.componentItem = {
                  type: item.code,
                  title: item.name,
                  isHeader: item.isHeader,
                  isHide: item.isHide,
                  componentType: parseInt(item.groupId),
                  iconsClass: item.iconsClass,
                  routerPath: (resolve) => require([`${item.routerPath}`], m => resolve(m.default))
                }
              }
              this.componentLists.push(this.componentItem)
            })
           } else {
             this.componentLists1 = []
           }
       })
    },
    cloneDog({ type }) {
      return this.componentLists.find(x => x.type === type)
    },
    /** 添加组件*/
    addComponent(item) {
      this.$emit('addComponent', item)
    },
    /** 隐藏组件*/
    hideComponents() {
      if (this.hideTheseComponents.length) { // 判断是否隐藏这些组件，那么其他的组件均显示（除了isHeader的）
        this.componentLists.map(res => {
          if (!res.isHeader) {
            this.$set(res, 'isHide', false)
          }
        })
      }
      this.isShowOrHide(this.hideTheseComponents, true)
    },
    showComponents() {
      if (this.showTheseComponents.length) { // 判断是否显示这些组件，那么其他的组件均隐藏
        this.componentLists.map(res => {
          if (!res.isHeader) {
            this.$set(res, 'isHide', true)
          }
        })
      }
      this.isShowOrHide(this.showTheseComponents, false)
    },
    isShowOrHide($data, isHide) {
      if (!$data.length) return
      $data.map(res => {
        if (res.type) {
          const $index = this.componentLists.findIndex(x => x.type === res.type)
          if ($index >= 0) {
            this.$set(this.componentLists[$index], 'isHide', isHide)
          }
        }
      })
    }

  }
}
